<template>
  <div class="app-container">
    <!-- 主体 start -->
    <el-container>
      <el-main height>
        <div class="block">
          <span class="demonstration">日期范围：</span>
          <el-date-picker
            v-model="value_time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <span class="demonstration" style="margin-left: 20px"
            >费用类型：</span
          >
          <el-select v-model="options_value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button style="margin-left: 20px" type="primary" @click="searchBtn"
            >搜索</el-button
          >
        </div>

        <!-- 表格 start -->
        <el-table
          border
          :data="list.List"
          v-loading="loading"
          style="width: 100%; margin-top: 30px"
        >
          <el-table-column
            align="center"
            prop="Amount"
            label="金额"
          ></el-table-column>
          <el-table-column align="center" prop="Type" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.TradeType == 1" style="color: #409eff">
                ●钱包充币
              </div>
              <div v-if="scope.row.TradeType == 2" style="color: #409eff">
                ●扣取服务费
              </div>
              <div v-if="scope.row.TradeType == 3" style="color: #409eff">
                ●直客收益
              </div>
              <div v-if="scope.row.TradeType == 4" style="color: #409eff">
                ●托管费用扣除
              </div>
              <div v-if="scope.row.TradeType == 5" style="color: #409eff">
                ●转出
              </div>
              <div v-if="scope.row.TradeType == 6" style="color: #409eff">
                ●转入
              </div>
              <div v-if="scope.row.TradeType == 7" style="color: #409eff">
                ●提币
              </div>
              <div v-if="scope.row.TradeType == 8" style="color: #409eff">
                ●提币手续费
              </div>
              <div v-if="scope.row.TradeType == 9" style="color: #409eff">
                ●星级奖励
              </div>
              <div v-if="scope.row.TradeType == 10" style="color: #409eff">
                ●直推奖励
              </div>
              <div v-if="scope.row.TradeType == 11" style="color: #409eff">
                ●邀请奖励
              </div>
              <div v-if="scope.row.TradeType == 12" style="color: #409eff">
                ●交保证金
              </div>
              <div v-if="scope.row.TradeType == 13" style="color: #409eff">
                ●A基金收益
              </div>
              <div v-if="scope.row.TradeType == 14" style="color: #409eff">
                ●B基金收益
              </div>
              <div v-if="scope.row.TradeType == 15" style="color: #409eff">
                ●C基金收益
              </div>
              <div v-if="scope.row.TradeType == 16" style="color: #409eff">
                ●基金余额转可用余额
              </div>
              <div v-if="scope.row.TradeType == 17" style="color: #409eff">
                ●退保证金
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="CreateTime"
            label="时间"
          ></el-table-column>
          <!-- <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="deleteRow(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <div class="block" style="margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.CurrentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.TotalCount"
          ></el-pagination>
        </div>
        <!-- 表格 end -->
      </el-main>
    </el-container>
    <!-- 主体 end -->
    <!-- 查看弹窗 start -->

    <!-- 查看弹窗 end -->
  </div>
</template>

<script>
import { GetAmountList, GetAmountType } from "../../api/amount";
import { GetLangType } from "../../api/public";
export default {
  data() {
    return {
      //表格参数
      loading: true,
      list: [],
      search: {
        CurrentPage: 1,
        PageSize: 10,
        TradeType: "",
        StartTime: "",
        EndTime: "",
      },
      //弹窗参数
      pupopState: false,
      row: {
        Title: "",
        Content: "",
        Lang: "zh-cn",
        Type: 7,
      },
      value_time: "",
      options: [],
      options_value: "",
      lang: [],
    };
  },
  watch: {},
  created() {
    this.getList();
    this.getType();
  },
  methods: {
    //获取用户数据
    getList() {
      this.loading = true;
      //   this.search.StartTime =''

      // //   search: {
      //     CurrentPage: 1,
      //     PageSize: 10,
      //     TradeType : "",
      //     StartTime :"",
      //     EndTime :"",
      //   },
      console.log(JSON.stringify(this.value_time));
      if (this.value_time) {
        this.search.StartTime = this.value_time[0];
        this.search.EndTime = this.value_time[1];
      } else {
        this.search.StartTime = "";
        this.search.EndTime = "";
      }
      //   console.log(this.options_value);
      this.search.TradeType = this.options_value;
      GetAmountList(this.search).then((res) => {
        if (res.Code == 200) {
          this.list = res.Data;
          this.loading = false;
        }
      });
    },
    getType() {
      GetAmountType().then((res) => {
        if (res.Code == 200) {
          this.options = res.Data;
          console.log(JSON.stringify(this.options));
        }
      });
    },
    //添加
    config() {
      this.$confirm("是否添加该资讯", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          AddInfo(this.row).then((res) => {
            if (res.Code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.pupopState = false;
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    //删除
    deleteRow(row) {
      this.$confirm("是否删除该资讯", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            id: row.Id,
          };
          DeleteInfo(data).then((res) => {
            if (res.Code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
        })
        .catch(() => {});
    },
    //弹窗
    searchBtn() {
      this.search.CurrentPage = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.search.PageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.search.CurrentPage = val;
      this.getList();
    },
  },
};
</script>
<style>
.box {
  border: 1px solid #ccc;
  padding: 10px 0;
  margin-top: 20px;
}
.title {
  font-weight: bold;
  margin-left: 20px;
  font-size: 20px;
  padding: 20px 0;
}
</style>
